<template>
  <div id="colorBlock_1" >

    <router-link
        style="text-decoration: none;"
        :to="{name: 'Publish', params: {type: 'qrcode'}}">

      <div class="module">
        <el-image
            :src="require('@/assets/QRcode.png')"
            :fit="fit">
        </el-image>
        <div class="text">
          <div class="text1">扫码签到</div>
          <div class="text2">线下课堂快捷签到方式</div>
        </div>
      </div>

    </router-link>

    <router-link
        style="text-decoration: none;"
        :to="{name: 'Publish', params: {type: 'location'}}">

      <div class="module">
        <el-image
            :src="require('@/assets/location.png')"
            :fit="fit">
        </el-image>
        <div class="text">
          <div class="text1">定位签到</div>
          <div class="text2">线下课堂高质量签到方式</div>
        </div>
      </div>

    </router-link>

    <div class="line"></div>

    <router-link
        style="text-decoration: none;"
        :to="{name: 'Publish', params: {type: 'click'}}">

      <div class="module">
        <el-image
            :src="require('@/assets/click.png')"
            :fit="fit">
        </el-image>
        <div class="text">
          <div class="text1">点击签到</div>
          <div class="text2">线上课堂快捷签到方式</div>
        </div>
      </div>

    </router-link>

    <router-link
        style="text-decoration: none;"
        :to="{name: 'Publish', params: {type: 'vote'}}">

      <div class="module">
        <el-image
            :src="require('@/assets/voteSignIn.png')"
            :fit="fit">
        </el-image>
        <div class="text">
          <div class="text1">投票签到</div>
          <div class="text2">线上课堂实时掌握课堂</div>
        </div>
      </div>

    </router-link>


  </div>
</template>

<script>
export default {
  name: "Select",
  data() {
    return {
      fit:'contain',
    };
  }
}
</script>

<style scoped>
#colorBlock_1{
  /*background-color: #f3f8f5;*/
  max-width: 500px;
  min-width: 300px;
  min-height: 600px;
  width: 80%;
  height: 80%;
  margin: auto;
  margin-top: 3%;
  margin-bottom: 17%;
  border-radius: 20px;
  /*box-shadow: 2px 2px 3px rgba(192, 197, 194, 0.60);*/
}

.module{
  display: flex;
  max-width: 500px;
  min-width: 200px;
  min-height: 100px;
  width: 90%;
  height: 20%;
  margin: auto;
  margin-top: 5%;
  /*color: rgba(38,105,75,0.7);*/
  background-color: rgba(255,255,255,0.7);
  border-radius: 100px;
  font-size: 25px;
  box-shadow: 2px 2px 3px rgba(192, 197, 194, 0.60);
}

.module:hover{
  background-color: rgba(241, 238, 238, 0.4);
  box-shadow: 1px 1px 5px rgba(157, 162, 160, 0.7);
  cursor:pointer
}


.text{
  width: 100%;
}

.text1{
  color: rgba(26, 56, 43, 0.65);
  display: flex;
  height: 30%;
  width: 90%;
  margin: auto;
  margin-right: 5%;
  position: relative;
  text-align: center;
  font-size: 22.5px;
  font-weight: bold;
  top: 20%;
}

.text2{
  color: rgba(92, 126, 111, 0.65);
  display: flex;
  height: 20%;
  width: 90%;
  font-size: 20px;
  margin: auto;
  margin-right: 5%;
  position: relative;
  text-align: center;
  top: 22.5%;
}

.el-image {
  width: 100px;
  height: 100px;
  margin: auto;
  margin-left: 5%;
}

.line{
  margin: auto;
  margin-top: 5%;
  width: 70%;
  height: 1px;
  border-top: solid rgba(162, 178, 171, 0.7) 1px;
}
</style>